<template>
  <h2>测试六：watchEffect，关注对象值变化</h2>
  <p>{{ stu.name}} 今年：{{stu.age}} ,工资：{{ stu.job.salary}}</p>
  <button @click="stu.age++">过了一年</button>
  <button @click="stu.name+='!'">改名</button>
  <button @click="stu.job.salary+=300">加钱</button>
  <button @click="num++">点击{{num}}</button>
</template>

<script>
import {ref,reactive,watchEffect} from "vue";
export default {
  name: "MyWatch3",

  setup(){
    let num=ref(0)
    let stu=reactive({
      name:"yang",age:23,job:{
        salary:3000
      }
    })
    watchEffect(()=>{
      const x1=num.value
      const x2 = stu.job.salary
     console.log(  `发生了改变的值：${num.value},${stu.job.salary}变成了：${x1},${x2}` )
    })
    return{
      num,
      stu
    }
  }
}
</script>